<template>
	<!-- 经营统计页面 -->
	<view class="clear">
		<!-- 右上角的自定义 -->
		<view class="customize">
			<image src="../../static/预约挂号@3x.png"></image>
			<view>自定义</view>
		</view>
		<view class="buttonTop">
			<view class="clear day">
				<button :class="{days:day==='today'}" @click="dayclick('today')">今天</button>
				<button :class="{days:day==='yesterday'}" @click="dayclick('yesterday')">昨天</button>
			</view>
			<view class="getMoney">
				<view>
					<view>￥{{money}}</view>
					<view>收入</view>
				</view>
				<view>
					<view>{{orderCount}}</view>
					<view>订单量</view>
				</view>
			</view>
		</view>
		<view class="haveMoney">
			<view>
				收入分布
			</view>
			<view class="charts-box">
				<qiun-data-charts type="pie" :opts="opts" :chartData="chartData" />
			</view>
		</view>
		<view class="orderData">
			<view>
				订单分布
			</view>
			 <view class="charts-box">
				<qiun-data-charts type="column" :opts="opts1" :chartData="chartData1" />
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				buttonMsg: true,
				day: "today",
				money: 414254.23,
				orderCount: 5335,
				chartData: {},
				chartData1: {},
				// chartData1: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['pie'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
					color: ["#FFA500", "#1890FF", "#91CB74", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 20, 20, 20],
					enableScroll: false,
					extra: {
						pie: {
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: false,
							borderWidth: 3,
							borderColor: "#FFFFFF",
							// marginTop:100
						}
					}
				},
				opts1: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [30, 15, 0, 5],
					enableScroll: false,
					legend: {},
					xAxis: {
						disableGrid: true
					},
					yAxis: {
						data: [{
							min: 0
						}]
					},
					extra: {
						column: {
							type: "group",
							width: 50,
							activeBgColor: "#000000",
							activeBgOpacity: 0.08
						}
					}
				}
			}
		},
		onReady() {
			this.getServerData();
			this.getServerData1();
		},
		methods: {
			getServerData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						series: [{
							data: [{
								"name": "洗车",
								"value": 563
							}, {
								"name": "保养",
								"value": 425
							}]
						}]
					};
					this.chartData = JSON.parse(JSON.stringify(res));
				}, 500);
			},
			getServerData1() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						categories: ["维修", "保养", "洗车"],
						series: [{
							name: "订单量",
							data: [345, 145, 230]
						}]
					};
					this.chartData1 = JSON.parse(JSON.stringify(res));
				}, 500);
			},
			dayclick(day) {
				// alert(day)
				// console.log(day);
				this.day = day;
			}
		}
	}
</script>

<style>
	.customize {
		width: 180rpx;
		height: 80rpx;
		margin: 20rpx;
		position: relative;
		top: 0;
		right: -68%;
	}

	.customize>image {
		width: 60rpx;
		height: 60rpx;
		line-height: 60rpx;
	}

	.customize>view {
		font-size: 35rpx;
		color: blue;
		float: right;
		line-height: 60rpx;
	}

	.buttonTop {
		/* border: 2px solid red; */
		/* margin-bottom: 100rpx; */
		height: 300rpx;
	}

	.buttonTop>view:first-of-type {
		margin-left: 200rpx;
	}

	.buttonTop>view:first-of-type>button:first-of-type {
		/* background-color: blue; */
		/* color: black; */
	}

	.buttonTop>view:first-of-type>button {
		text-align: center;
		padding-bottom: 80rpx;
		/* color: blue; */
		width: 150rpx;
		height: 80rpx;
		float: left;
		border: 1px solid blue;
	}

	.day {
		height: 80rpx;
		margin-bottom: 80rpx;
	}

	.getMoney>view:first-of-type {
		margin-right: 60rpx;
	}

	.getMoney>view {
		margin: 0 auto;
		text-align: center;
		width: 220rpx;
		height: 90rpx;
		float: left;
		margin-left: 100rpx;
	}

	.getMoney>view:first-of-type>view:first-of-type {
		font-size: 40rpx;
		color: blue;
		margin-bottom: 10rpx;
		font-weight: 600;
	}

	.getMoney>view:first-of-type>view:nth-child(2) {
		font-size: 35rpx;
	}

	.getMoney>view:nth-child(2)>view:first-of-type {
		color: green;
		font-weight: 600;
		font-size: 35rpx;
		margin-bottom: 10rpx;
	}

	.getMoney>view:nth-child(2)>view:nth-child(2) {
		font-size: 30rpx;
	}

	.haveMoney {
		margin-top: 50rpx;
	}

	.haveMoney>view:first-of-type,
	.orderData>view:first-of-type {
		font-size: 35rpx;
		font-weight: 600;
		margin-left: 20rpx;
	}


	/* 饼状图的css样式 */
	.charts-box {
		width: 100%;
		height: 300px;
	}

	.days {
		background-color: blue;
		color: white;
	}
</style>